<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>借阅记录</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        h1 {
            text-align: center;
            color: #007BFF;
        }
        .records {
            margin-top: 20px;
        }
        .records table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .records th, .records td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        .records th {
            background-color: #2787e3;
            color: white;
        }
        .records tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .records tr:hover {
            background-color: #ddd;
        }
        .no-records {
            text-align: center;
            color: #777;
            font-style: italic;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>借阅记录</h1>
    <div class="records" id="records">
        <!-- 借阅记录将显示在这里 -->
    </div>
</div>

<script>
    function fetchBorrowRecords(userId) {
        if (!userId) {
            alert('用户编号无效');
            return;
        }

        // 发送请求获取借阅记录
        fetch(`http://localhost:8090/borrowRecords?userId=${userId}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === '200') {
                    displayRecords(data.data);
                } else {
                    alert('查询失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('查询失败，请检查网络连接');
            });
    }

    function displayRecords(records) {
        const recordsContainer = document.getElementById('records');
        recordsContainer.innerHTML = '';

        if (records.length === 0) {
            recordsContainer.innerHTML = '<p class="no-records">没有找到借阅记录</p>';
            return;
        }

        const table = document.createElement('table');
        const thead = document.createElement('thead');
        const tbody = document.createElement('tbody');

        // 表头
        const headers = ['图书名', '借阅日期', '借阅天数', '应还日期', '复本编号'];
        const trHead = document.createElement('tr');
        headers.forEach(header => {
            const th = document.createElement('th');
            th.textContent = header;
            trHead.appendChild(th);
        });
        thead.appendChild(trHead);
        table.appendChild(thead);

        // 数据行
        records.forEach(record => {
            const tr = document.createElement('tr');
            const fields = [record.title, record.borrowData, record.borrowDays, record.dueDate, record.copyId];
            fields.forEach(field => {
                const td = document.createElement('td');
                td.textContent = field;
                tr.appendChild(td);
            });
            tbody.appendChild(tr);
        });
        table.appendChild(tbody);

        recordsContainer.appendChild(table);
    }

    // 页面加载时自动获取借阅记录
    document.addEventListener('DOMContentLoaded', () => {
        const userId = sessionStorage.getItem('userId');
        if (userId) {
            fetchBorrowRecords(userId);
        } else {
            alert('用户编号未找到，请先设置用户编号');
        }
    });
</script>
</body>
</html>
